<script setup lang="ts">
defineOptions({
  name: "chemical"
});

import { ref, onMounted } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import { queryConsumptionAnalysis, queryGasNameList } from "@/api/modules/operation";
import dayjs from "dayjs";

const getEchartsOptions = (data: Record<string, any>) => {
  const { unit = "", valueList = [] } = data;
  const grid = {
    top: 30,
    bottom: 0,
    left: 0,
    right: 0,
    containLabel: true
  };
  const legend = {
    show: true
  };
  const tooltip = {
    show: true,
    trigger: "axis"
  };
  const xAxisData = valueList.map(item => item.name);
  const xAxis = {
    type: "category",
    data: xAxisData
  };
  const yAxis = {
    type: "value",
    name: unit
  };
  const seriesData = valueList.map(item => item.num);
  const series = [
    {
      type: "line",
      data: seriesData
    }
  ];
  return { grid, legend, tooltip, xAxis, yAxis, series };
};

// 化学品用量统计
const chemicalEchartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const chemicalTypeOptions = ref<Array<any>>([]);
const chemicalEchartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const chemicalType = ref<string>("");
const chemicalLoading = ref<boolean>(false);
const chemicalEchartsLoading = ref<boolean>(false);
const queryConsumptionAnalysisFn = async () => {
  chemicalEchartsLoading.value = true;
  const itemKey = chemicalType.value;
  const startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD");
  const endDate = dayjs().format("YYYY-MM-DD");
  const params = { itemKey, startDate, endDate };
  const res = await queryConsumptionAnalysis(params, () => {
    chemicalEchartsLoading.value = false;
  });
  chemicalEchartsOptions.value = getEchartsOptions(res[0]);
  chemicalEchartsComRef.value.initData(true);
  chemicalEchartsLoading.value = false;
};
const chemicalListInit = async () => {
  chemicalLoading.value = true;
  // gasType  气体类型(BULK_GAS：大宗气，SPECIALTY_GAS：特气，CHEMICAL：化学品
  const res = await queryGasNameList({ gasType: "CHEMICAL" }, () => {
    chemicalLoading.value = false;
  });
  chemicalTypeOptions.value = res;
  chemicalType.value = res[0];
  chemicalLoading.value = false;
  await queryConsumptionAnalysisFn();
};

onMounted(async () => {
  chemicalListInit();
});
</script>

<template>
  <div class="gas-overview-item">
    <modelBox title="化学品用量统计">
      <div v-loading="chemicalLoading" class="gas-overview-item-line">
        <div class="gas-overview-item-line-select">
          <px-select v-model="chemicalType" @change="queryConsumptionAnalysisFn">
            <px-option v-for="item in chemicalTypeOptions" :key="item" :label="item" :value="item" />
          </px-select>
        </div>
        <div v-loading="chemicalEchartsLoading" class="gas-overview-item-line-echarts">
          <echartsCom ref="chemicalEchartsComRef" :options="chemicalEchartsOptions" />
        </div>
      </div>
    </modelBox>
  </div>
</template>

<style lang="scss" scoped>
.gas-overview-item {
  width: 100%;
  height: 100%;

  .gas-overview-item-line {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .gas-overview-item-line-select {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;

      .px-select {
        width: 140px;
      }
    }

    .gas-overview-item-line-echarts {
      flex: 1;
      height: 0;
    }
  }
}
</style>
